<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="static/css/admin.css" rel="stylesheet" type="text/css">
		<link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="static/css/personal.css" rel="stylesheet" type="text/css">
		<link href="static/css/systyle.css" rel="stylesheet" type="text/css">
		<link href="static/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="static/js/bootstrap.js"></script>
		<script type="text/javascript" src="static/js/jquery-1.9.min.js"></script>

		
		    <!-- 引入样式 -->
<link rel="stylesheet" href="static/css/element.css">

	</head>
	<body>
		
		<div id="app">
			
			<div class="m-order" style="margin-bottom: 0px;">
				<div class="s-bar"><i class="s-icon"></i>我的订单
					<a href="" class="i-load-more-item-shadow" @click="all">
						<button class="btn btn-success btn-xs"> 全部订单</button>
						</a>
				</div>
				<ul>
					<li style="width: 25%;">
						<a @click="queryByStatus(1)"><i><img src="static/images/pay.png"></i> <span>待付款<em class="m-num" style="display: none;">0</em></span></a>
					</li>
					<li style="width: 25%;">
						<a @click="queryByStatus(2)"><i><img src="static/images/send.png"></i> <span>待发货<em class="m-num" style="display: none;">0</em></span></a>
					</li>
					<li style="width: 25%;">
						<a @click="queryByStatus(3)"><i><img src="static/images/receive.png"></i> <span>待收货<em class="m-num" style="display: none;">0</em></span></a>
					</li>
					<li style="width: 25%;">
						<a @click="queryByStatus(4)"><i><img src="static/images/comment.png"></i> <span>待评价<em class="m-num" style="display: none;">0</em></span></a>
					</li>

					<li style="width: 25%;">
						<a @click="queryByStatus(6)"><i><img src="static/images/comment.png"></i> <span>已关闭<em class="m-num" style="display: none;">0</em></span></a>
					</li>
				</ul>
			</div>
			
			<div class="box-container-bottom" style="margin-bottom: 15px;"></div>
			

			<!-- 订单列表管理 -->
			<div class="m-logistics">
				<div class="s-bar"><i class="s-icon"></i>订单动向
				</div>
				<div class="s-content">
					<ul class="lg-list"></ul>
					<table class="table">
						<tr>
							<td>序号</td>
							<td>订单商品</td>
							<td>订单状态</td>
							<td>时间</td>
							<td>操作</td>
						</tr>
						<template v-for="order,index in this.orders">
						
							<tr>
								<td>{{index+1}}</td>
								<td>{{order.untitled}}</td>
								<td>
									<span v-if="order.status=='1'">待付款</span>
									<span v-else-if="order.status=='2'">待发货</span>
									<span v-else-if="order.status=='3'">待收货</span>
									<span v-else-if="order.status=='4'">待评价</span>
									<span v-else-if="order.status=='5'">已完成</span>
									<span v-else-if="order.status=='6'">已关闭</span>

									</td>
									
								<td>{{order.createTime}}</td>
								<td>
									<template v-if="order.status=='1'">
									<button class="btn btn-success btn-xs">
											去支付

									</button >
									<button @click="cancel"  class="btn btn-danger btn-xs" :data-index="index">
											取消订单
										</button>
									</template>
								
								
							  <!-- <template  @click="cancel" v-if="order.status=='2'">
									<button  class="btn btn-danger btn-xs">
										取消订单
									</button>
										
									</template>

							    <template v-if="order.status=='3'">
									<button class="btn btn-success btn-xs">
									确认收货

								    </button >	
								
							    </template>
									
									
									<template v-if="order.status=='4'">
										<button class="btn btn-success btn-xs" @click="gotoComment" :data-index="index">
											去评价
										</button >
									</template>
							
					
								<template v-if="order.status=='6'" || v-if="order.status=='5'" >
										<button class="btn btn-danger btn-xs">
											删除
										</button >
								</template> 
								
-->
									


								</td>
							</tr>


						</template>

						<tr>
							<td colspan="5">
								<!-- 分页 -->
								<el-pagination
									  background
									  layout="prev, pager, next"
									  :current-page="pageNum"
									  :page-size="limit"
									  :total="count" @current-change="pager">
								</el-pagination>
								
							</td>
						</tr>






					</table>
				</div>
			</div>
			
		</div>
		<script type="text/javascript " src="static/js/quick_links.js "></script>
		<script src="static/js/cookie_utils.js"></script>
		<!-- element-ui需要引入vue.js -->
		<script src="static/js/vue.min.js"></script>
		<!-- 引入组件库 -->
<script src="static/js/element.js"></script>
		<script src="static/js/axios.min.js"></script>
		<script src="static/js/utils.js"></script>

		<script type="text/javascript">
			var baseUrl="http://localhost:8080/";
      var vm=new Vue({
		el:"#app",
		data:{
			token:"",
			username:"",
			pageNum:1,
			limit:4,
			userId:"",
			orders:[],
			count:0,
			status:null,
			

		},
		created(){
		 this.token=getCookieValue("token");
		 this.userId=getCookieValue("userId");

		 this.username=getCookieValue("username");

		//  加载页面，请求订单信息
		var url1=baseUrl+"order/list";
		axios({
			url:url1,
			method:"get",
			headers:{
				token:this.token
			},
			params:{
				userId:this.userId,
				pageNum:this.pageNum,
				limit:this.limit
			}

		}).then((res)=>{
			console.log(res.data);
			if(res.data.code==1){

				this.orders=res.data.data.data;
				console.log(this.orders);
				this.count=res.data.data.count;

			}
		});

	
		},
		methods: {
			// 通过分页进行查询
			pager(page){
				this.pageNum=page;
				//重新加载页面
				
				//  加载页面，请求订单信息

					// -------------分页查询按照状态进行查询
			var obj={
				userId:this.userId,
				pageNum:this.pageNum,
				limit:this.limit
			};

			if(this.status!=null){
				obj.status=this.status;

			}

			// ------------
		var url1=baseUrl+"order/list";
		axios({
			url:url1,
			method:"get",
			headers:{
				token:this.token
			},
			params:obj

		}).then((res)=>{
			console.log(res.data);
			if(res.data.code==1){

				this.orders=res.data.data.data;
				console.log(this.orders);
				this.count=res.data.data.count;

			}
		});
				
				
			},

			// 通过订单状态进行查询
			queryByStatus(status){
			this.status=status;
			console.log(this.status);
			var url1=baseUrl+"order/list123";

			axios({
				url:url1,
				method:"get",
				headers:{
					token:this.token
				},
				params:{
					userId:this.userId,
					pageNum:this.pageNum,
					limit:this.limit,
					status:this.status
				}

			}).then((res)=>{
				console.log(res.data);
				if(res.data.code==1){
				this.orders=res.data.data.data;
				console.log(this.orders);
				this.count=res.data.data.count;

			}
		});
			


		},
			// 通过订单状态进行查询
			queryByStatus(status){

				this.status=status;
				console.log(this.status);

// 重新按照状态查询一次



				//  加载页面，请求订单信息
				var url1=baseUrl+"order/list";
				axios({
					url:url1,
					method:"get",
					headers:{
						token:this.token
					},
					params:{
						userId:this.userId,
						pageNum:this.pageNum,
						limit:this.limit,
						status:this.status
					}

				}).then((res)=>{
					console.log(res.data);
					if(res.data.code==1){

						this.orders=res.data.data.data;
						console.log(this.orders);
						this.count=res.data.data.count;

					}
				});



			},

			gotoComment:function(event){
			var index=event.srcElement.dataset.index;
			console.log(index);
			var order=this.orders[index];
			localStorage.setItem("order",JSON.stringify(order));
			location.href="user-comment.html";
			
},

			cancel:function(event,orders){
				var index=event.srcElement.dataset.index;
				console.log(index);
				console.log("取消订单");
				console.log(orders);
				var order666=this.orders[index];
				var url6=baseUrl+"order/cancel";
				axios({
					url:url6,
					method:"post",
					headers:{
						token:this.token
					},
					data:order666

				}).then((res)=>{
					this.all();
				});


			},
			all(){

					//  加载页面，请求订单信息
				var url1=baseUrl+"order/list";
				axios({
					url:url1,
					method:"get",
					headers:{
						token:this.token
					},
					params:{
						userId:this.userId,
						pageNum:this.pageNum,
						limit:this.limit
					}

				}).then((res)=>{
					console.log(res.data);
					if(res.data.code==1){

						this.orders=res.data.data.data;
						console.log(this.orders);
						this.count=res.data.data.count;

					}
				});
			}

},

	
		
		
 })

</script>
		
		
	</body>
</html>
